import React from 'react';
import {Form, Row, Col, Button, Input ,Select,message} from 'antd';
import {injectIntl} from 'react-intl';
import Grid from '../../components/table/grid';
import SCModal from '../../components/pickCity/SCModal';
import axios from "axios/index";
const Option = Select.Option;
const FormItem = Form.Item;
const createForm = Form.create;


class stub extends React.Component {
    constructor(props) {
        super(props);
        this.common = this.props.intl.messages.common;
        this.state={
            selectedRow:{},
            visible:false,
            params:{
                stationId:this.props.location.state?this.props.location.state.stationId:this.props.history.goBack(),
            },
            refresh:0
        };
        this.columns=[
            {
                title: this.common.stubID,
                dataIndex: 'EquipmentID',
                key: 'EquipmentID',
            },
            {
                title: this.common.status,
                dataIndex: 'EquipmentStatus',
                key: 'EquipmentStatus',
                render: (text) => {
                    let stutus='';
                    if(text==='0'){
                        stutus=this.common.offNet
                    }
                    if(text==='1'){
                        stutus=this.common.leisure
                    }
                    if(text==='2'){
                        stutus=this.common.OccupancyUncharged
                    }
                    if(text==='3'){
                        stutus=this.common.OccupancyCharged
                    }
                    if(text==='4'){
                        stutus=this.common.OccupancyOrder
                    }
                    if(text==='255'){
                        stutus=this.common.malfunction
                    }
                    return(stutus)
                }
            },
            {
                title: this.common.operation,
                key: 'operation',
                render: (text, record) => {
                    return (
                        <span>
                            <a onClick={() => this.openStub(text, record)}>{this.common.modifyStatus}</a>
                        </span>
                    )
                },
            }
        ]
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((errors, values) => {
            if (!!errors) {
                console.log('Errors in form!!!');
                return;
            }

            values.connectorId=this.state.selectedRow.ConnectorInfos[0].ConnectorID;
            console.log('Submit!!!',values);
            axios.post('/api/evcs/stub/update',{...values}).then(res=>{
                if(res){
                    message.success('操作成功');
                    this.setState({
                        visible:false,
                        refresh:this.state.refresh+1
                    })
                }
            })
        });
    }

    openStub=(t)=>{
        this.setState({
            visible:true,
            selectedRow:t
        })
    }
    onCancel=()=>{
        this.setState({
            visible:false
        })
    };

    transformData=(data)=>{
        data.forEach((k,v)=>{
            k.id=v;
        })
        return data
    }


    render(){
        const {getFieldDecorator} = this.props.form;
        return(
            <div>
                <Grid transformData={this.transformData} refresh={this.state.refresh} params={this.state.params}
                      columns={this.columns} url="/api/evcs/stub/qry"/>
                <SCModal visible={this.state.visible} title={'修改'}  onCancel={this.onCancel}>
                    <form  form={this.props.form} style={{width:'60%'}}>
                        <FormItem
                            label="状态"
                        >
                            {getFieldDecorator('status',{
                                rules:[
                                    {
                                        required: true,
                                        message: '请选择状态'
                                    },
                                ],
                            })(
                                <Select optionLabelProp="children" optionFilterProp="children">
                                    <Option value={'0'} key={0}>离网</Option>
                                    <Option value={'1'} key={1}>空闲</Option>
                                    {/*<Option value={'2'} key={2} disabled>占用（未充电）</Option>*/}
                                    {/*<Option value={'3'} key={3} disabled>占用（充电中）</Option>*/}
                                    {/*<Option value={'4'} key={4} disabled>占用（预约锁定）</Option>*/}
                                    {/*<Option value={'255'} key={255} disabled>故障</Option>*/}
                                </Select>
                            )}
                        </FormItem>
                        <FormItem>
                            <Button type="primary" htmlType="submit" onClick={this.handleSubmit}>{this.common.sure}</Button>
                        </FormItem>
                    </form>
                </SCModal>
            </div>
        )
    }
}

stub = createForm()(stub);
export default injectIntl(stub)